import React, { Component } from 'react';
import {
	Text, View, Image, StyleSheet, TouchableOpacity, Animated, PixelRatio
} from "react-native";
import { Loading } from '../../../../../component/page-status/Pageloading';
import { CostBenefit } from './CostBenefit';
import { SpaceBetween } from '../../../create/_components/SpaceBetween.js';
import { CURRENCY } from '../../../../../utils/helper';
import MethodUtil from '../../../../../utils/MethodUtil';
// import { styles } from '../../_common/style';
import { style } from '../../../../../theme/style';
import { GLOBAL } from '../../../../../config/global';
import { API, API_GENERATE } from '../../../../../config/api';
import HTTP from '../../../../../utils/http'
import { CommonDialog } from '../../../../../components/common/Dialog';
const scale = GLOBAL.SCALE;
const query = require('../../../../../imgs/global/query.png');


//商品信息

export class ProductSection extends Component {
	constructor(props) {
		super(props);
		let { visible } = props || {};
		this.state = {
			isHeight: visible,
			startHeight: 0,
			imgObj: new Animated.Value(visible ? 0 : 1),
			costData: null,
			feeData: null,
			loaded: true,
			marketData: null
		}
		this.onOff = true;
		this.openDetail = visible;
		this.getCost = true
	}

	componentWillMount() {
		if (this.props.visible) {
			this._getCostData()
		}
	}
	componentWillReceiveProps(props) {
		if (props.visible && !this.state.costData) {
			this._getCostData()
		}
	}

	// 动画
	_startAnimated = () => {
		let { isHeight, startHeight, heightObj, imgObj } = this.state;
		if (isHeight && !this.openDetail) {
			Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
			Animated.timing(heightObj, { toValue: 0, duration: 300, }).start(() => { this.setState({ isHeight: 0 }) });
		} else {
			Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
			Animated.timing(heightObj, { toValue: startHeight, duration: 300 }).start(() => { this.setState({ isHeight: startHeight }) })
		}
	}

	async _getCostData() {
		if (!this.state.costData) {
			this.openDetail = true
			let { data, corpId, bizMode, visible } = this.props || {};
			let { goodsId, orderId, orderType } = data
			if (!visible) {
				this._startAnimated()
			}
			let fee = {
				goodsId,
				orderId,
				orderType,
				bizMode
			}
			let market = {
				goodsId,
				pageSize: 10,
				pageNo: 1
			}
			let cost = {
				orderId,
				goodsId
			}
			let feeData = await HTTP.GET(API_GENERATE(API.GOOD_FEE), fee);
			let marketData = await HTTP.GET(API_GENERATE(API.GOOD_MARKET_PRICE), market);
			let costData = await HTTP.GET(API_GENERATE(API.COST_BENEFIT_DETAil), cost);
			this.setState({
				costData,
				loaded: false,
				feeData,
				marketData: marketData.rows,
			})

		}
		else {
			this.openDetail = false
			this._startAnimated()
		}
		// const Result = await HTTP.GET(API_GENERATE(API.COST_BENEFIT_DETAil) + `?corpId=${data.corpId}`);
		// console.log(Result)
	}

	_onLayout = (event) => {
		let startHeight = 0;
		startHeight = event.nativeEvent.layout.height + 10 * scale;
		if (startHeight !== this.state.startHeight && this.openDetail) {
			this.setState({
				startHeight
			}, () => {
				this._startAnimated()
			})
		}
		if (this.onOff) {
			this.setState({
				startHeight,
				heightObj: new Animated.Value(0),
				isHeight: 0,
			})
			this.onOff = false
		}
	}

	itemDetail() {
		let { costData, marketData, feeData } = this.state
		let upDegreen = require('../../../../../imgs/my-siter/up.png');
		let downDegreen = require('../../../../../imgs/my-siter/down.png');
		let { bizMode, propsData, data, tCode, orderAllInfo } = this.props || {};
		if (feeData) {
			var { lastTransactionPrice, orderCommitMarketPrice, midMarketPrice, purOrderCommitMarketPrice, salOrderCommitMarketPrice } = feeData
		}
		return (
			<View>
				{!this.state.loaded ?
					<View>
						{costData ?
							<View>
								{/* 成本交易 */}
								<CostBenefit orderAllInfo={orderAllInfo} costData={costData} data={data} bizMode={bizMode} click={true} propsData={propsData} tCode={tCode} />
								<View style={styles.costBox}>
									{/* 闭口没有上次成交价 */}
									{bizMode === 0 && lastTransactionPrice ?
										<View>
											<View style={[styles.flexRow, { paddingLeft: 15 }]}>
												<Text style={styles.costTitle}>上次成交价(元/吨)</Text>
											</View>
											<View style={styles.costTableBottom}>
												<Text style={styles.costTableRightTitle}>当前成交对比涨跌</Text>
											</View>
											<View style={styles.costTableHorizontal}>
												<View style={styles.costTableLeft}>
													<Text style={styles.costTableTitle}>{lastTransactionPrice.createTime}</Text>
												</View>
												<View style={styles.costTableRight}>
													<Text style={styles.costTableRed}>落袋价</Text>
													<Text style={styles.costTableText}>{MethodUtil.toThousands(lastTransactionPrice.pocketPrice, 2)}</Text>
												</View>
												{lastTransactionPrice.rangeIncreaseFlag == "UNBIASED" ?
													<View style={[styles.costTableRightMin, { justifyContent: 'center' }]}>
														<Text>-</Text>
													</View> :
													<View style={styles.costTableRight}>
														<Image source={lastTransactionPrice.rangeIncreaseFlag === 'UP' ? upDegreen : downDegreen} style={styles.priceFlag} />
														<Text style={lastTransactionPrice.rangeIncreaseFlag === 'UP' ? styles.tableUpText : styles.tableDownText}>{lastTransactionPrice.rangeIncrease}</Text>
													</View>
												}
											</View>
											<View style={[styles.costTableLine, { marginTop: 10 }]}></View>
										</View>
										: null
									}
									{bizMode === 0 && !lastTransactionPrice ?
										<View>
											<View style={[styles.flexRow, { paddingLeft: 15 }]}>
												<Text style={styles.costTitle}>上次成交价(元/吨)</Text>
											</View>
											<View style={styles.costTableBottom}>
												<Text style={styles.costTableRightTitle}>当前成交对比涨跌</Text>
											</View>
											<View style={styles.bockBox}>
												<Text>暂无对标</Text>
											</View>
											<View style={[styles.costTableLine, { marginTop: 10 }]}></View>
										</View> : null
									}
									{/* 当前最新现货价采销一致 */}
									<View>
										<View style={[styles.flexRow, { paddingLeft: 15, marginTop: 12 }]}>
											<Text style={styles.costTitle}>化销现货价(元/吨)</Text>
										</View>
										<View style={styles.costTableBottom}>
											<Text style={styles.costTableRightTitle}>当前成交落袋价对比涨跌</Text>
										</View>
										{midMarketPrice ?
											<View>
												<View style={styles.costTableHorizontal}>
													<View style={[styles.costTableLeft, { justifyContent: 'space-between' }]}>
														<Text style={styles.costTableTitle}>当前最新现货价</Text>
														{bizMode === 1 ?
															<View style={[styles.modeType, { marginRight: 0 }]}>
																<Text style={styles.modeTypeText}>采</Text>
															</View> : null
														}
													</View>
													<View style={styles.costTableRight}>
														<Text style={styles.costTableText}>{MethodUtil.toThousands(midMarketPrice.suggestedPrice, 2)}</Text>
													</View>
													{midMarketPrice.rangeIncreaseFlag == "UNBIASED" ?
														<View style={[styles.costTableRightMin, { justifyContent: 'center' }]}>
															<Text>-</Text>
														</View> :
														<View style={styles.costTableRight}>
															<Image source={midMarketPrice.rangeIncreaseFlag === 'UP' ? upDegreen : downDegreen} style={styles.priceFlag} />
															<Text style={midMarketPrice.rangeIncreaseFlag === 'UP' ? styles.tableUpText : styles.tableDownText}>{midMarketPrice.rangeIncrease}</Text>
														</View>
													}
												</View>
												{bizMode === 1 ?
													<View style={styles.costTableHorizontal}>
														<View style={[styles.costTableLeft, { justifyContent: 'flex-end' }]}>
															<View style={[styles.modeTypeSale, { marginRight: 0 }]}>
																<Text style={styles.modeTypeText}>销</Text>
															</View>
														</View>
														<View style={styles.costTableRight}>
															<Text style={styles.costTableText}>{MethodUtil.toThousands(midMarketPrice.suggestedPrice, 2)}</Text>
														</View>
														{midMarketPrice.rangeIncreaseFlag == "UNBIASED" ?
															<View style={[styles.costTableRightMin, { justifyContent: 'center' }]}>
																<Text>-</Text>
															</View> :
															<View style={styles.costTableRight}>
																<Image source={midMarketPrice.rangeIncreaseFlag === 'UP' ? upDegreen : downDegreen} style={styles.priceFlag} />
																<Text style={midMarketPrice.rangeIncreaseFlag === 'UP' ? styles.tableUpText : styles.tableDownText}>{midMarketPrice.rangeIncrease}</Text>
															</View>
														}
													</View> : null
												}
											</View>
											: null}
										{bizMode === 0 && orderCommitMarketPrice ?
											<View>
												<View style={styles.costTableHorizontal}>
													<View style={styles.costTableLeft}>
														<Text style={styles.costTableTitle}>订单提交现货价</Text>
													</View>
													<View style={styles.costTableRight}>
														<Text style={styles.costTableText}>{MethodUtil.toThousands(orderCommitMarketPrice.suggestedPrice, 2)}</Text>
													</View>
													{orderCommitMarketPrice.rangeIncreaseFlag == "UNBIASED" ?
														<View style={[styles.costTableRightMin, { justifyContent: 'center' }]}>
															<Text>-</Text>
														</View> :
														<View style={styles.costTableRight}>
															<Image source={orderCommitMarketPrice.rangeIncreaseFlag === 'UP' ? upDegreen : downDegreen} style={styles.priceFlag} />
															<Text style={orderCommitMarketPrice.rangeIncreaseFlag === 'UP' ? styles.tableUpText : styles.tableDownText}>{orderCommitMarketPrice.rangeIncrease}</Text>
														</View>
													}
												</View>
												{data.createTime ?
													<View style={[styles.costTableHorizontal, { marginTop: 5 }]}>
														<Text style={[styles.costTableTitle, { fontSize: 10 }]}>({data.createTime})</Text>
													</View>
													: null
												}
											</View> : null
										}
										{bizMode === 1 && purOrderCommitMarketPrice && salOrderCommitMarketPrice ?
											<View>
												<View style={[styles.costTableHorizontal, { alignItems: 'flex-start' }]}>
													<View style={[styles.costTableLeft, { alignItems: 'flex-start', justifyContent: 'space-between' }]}>
														<View>
															<Text style={styles.costTableTitle}>订单提交现货价</Text>
															{data.createTime ?
																<Text style={[styles.costTableTitle, { fontSize: 10 }]}>({data.createTime})</Text>
																: null
															}
														</View>
														<View style={[styles.modeType, { marginRight: 0 }]}>
															<Text style={styles.modeTypeText}>采</Text>
														</View>
													</View>
													<View style={styles.costTableRight}>
														<Text style={styles.costTableText}>{MethodUtil.toThousands(purOrderCommitMarketPrice.suggestedPrice, 2)}</Text>
													</View>
													{purOrderCommitMarketPrice.rangeIncreaseFlag == "UNBIASED" ?
														<View style={[styles.costTableRightMin, { justifyContent: 'center' }]}>
															<Text>-</Text>
														</View> :
														<View style={styles.costTableRight}>
															<Image source={purOrderCommitMarketPrice.rangeIncreaseFlag === 'UP' ? upDegreen : downDegreen} style={styles.priceFlag} />
															<Text style={purOrderCommitMarketPrice.rangeIncreaseFlag === 'UP' ? styles.tableUpText : styles.tableDownText}>{purOrderCommitMarketPrice.rangeIncrease}</Text>
														</View>
													}
												</View>
												<View style={[styles.costTableHorizontal, { marginTop: 5 }]}>
													<View style={[styles.costTableLeft, { justifyContent: 'flex-end' }]}>
														<View style={[styles.modeTypeSale, { marginRight: 0 }]}>
															<Text style={styles.modeTypeText}>销</Text>
														</View>
													</View>
													<View style={styles.costTableRight}>
														<Text style={styles.costTableText}>{MethodUtil.toThousands(salOrderCommitMarketPrice.suggestedPrice, 2)}</Text>
													</View>
													{salOrderCommitMarketPrice.rangeIncreaseFlag == "UNBIASED" ?
														<View style={[styles.costTableRightMin, { justifyContent: 'center' }]}>
															<Text>-</Text>
														</View> :
														<View style={styles.costTableRight}>
															<Image source={salOrderCommitMarketPrice.rangeIncreaseFlag === 'UP' ? upDegreen : downDegreen} style={styles.priceFlag} />
															<Text style={salOrderCommitMarketPrice.rangeIncreaseFlag === 'UP' ? styles.tableUpText : styles.tableDownText}>{salOrderCommitMarketPrice.rangeIncrease}</Text>
														</View>
													}
												</View>
											</View> : null
										}
										{!orderCommitMarketPrice && !purOrderCommitMarketPrice && !midMarketPrice ?
											<View style={styles.bockBox}>
												<Text>暂无对标</Text>
											</View> : null
										}
										<View style={[styles.costTableLine, { marginTop: 10 }]}></View>
									</View>
									{marketData ?
										<View>
											<View style={[styles.flexRow, { paddingLeft: 15, marginTop: 12 }]}>
												<Text style={styles.costTitle}>当前市场价(元/吨)</Text>
											</View>
											<View style={styles.costTableBottom}>
												<Text style={styles.costTableRightTitle}>较上次市场价涨跌</Text>
											</View>
											{marketData.length > 0 ? marketData.map((marketItem, marketIndex) => {
												return (
													<View style={styles.costMarketHorizontal} key={marketIndex}>
														<View>
															<Text style={styles.costTableRightTitle}>{marketItem.channelName}</Text>
														</View>
														<View>
															{marketItem.marketPriceReturnLineList.map((item, index) => {
																var priceDate = item.priceDate.substr(5, 2) + '/' + item.priceDate.substr(8, 2)
																return (
																	<View style={styles.marketHorizontal} key={index}>
																		<View style={[styles.costTableLeft, { width: 180 * scale }]}>
																			<Text style={styles.costTableTitleMin}>{priceDate}</Text>
																			<Text style={styles.costTableTitleMin}>{item.subjectMatterName}</Text>
																		</View>
																		<View style={styles.costTableRightMin}>
																			<Text style={styles.costTableText}>{MethodUtil.toThousands(item.priceValue)}</Text>
																		</View>
																		{item.rangeIncreaseFlag == "UNBIASED" ?
																			<View style={[styles.costTableRightMin, { justifyContent: 'center' }]}>
																				<Text>-</Text>
																			</View>
																			:
																			<View style={styles.costTableRightMin}>
																				<Image source={item.rangeIncreaseFlag == 'UP' ? upDegreen : downDegreen} style={styles.priceFlag} />
																				<Text style={item.rangeIncreaseFlag == 'UP' ? styles.tableUpText : styles.tableDownText}>{MethodUtil.toThousands(item.rangeIncrease * 100, 2)}%</Text>
																			</View>

																		}
																	</View>
																)
															})
															}
														</View>
													</View>
												)
											}) :
												<View style={styles.bockBox}>
													<Text>暂无对标</Text>
												</View>
											}
											{/* {market && market.length > 10 ?
												<TouchableOpacity style={{ alignItems: 'center', marginTop: 15 }} onPress={() => { propsData.navigation.navigate('MarketDetailPage', marketData); }}>
													<Text style={{ fontSize: 10, color: '#55ADF0' }}> > 查看更多</Text>
												</TouchableOpacity> : null
											} */}
										</View> :
										null
									}
								</View>
							</View> :
							<View style={styles.bockBox}>
								<Text>暂无对标</Text>
							</View>
						}
					</View> : <Loading bgShow={true} />
				}
			</View>
		)
	}

	// 显示 基准日/基准月
	_describe = (goodsInfo) => {
		let { formulaSettleType, formulaSettleName, formulaCustomValue } = goodsInfo || {};
		let results = null;
		if (formulaSettleType === 'BASE_DATE') {  // 基准日
			if (formulaCustomValue) {
				results = `基准日: ${formulaCustomValue}`;
			} else {
				results = formulaSettleName;
			}
		} else if (formulaSettleType === 'MONTHLY_AVG') {  //基准月
			if (formulaCustomValue) {
				results = `基准月: ${formulaCustomValue}`;
			} else {
				results = formulaSettleName;
			}
		} else {  //日期范围
			if (formulaSettleName) {
				results = `日期范围: ${formulaSettleName}`;
			}
		}
		return results;
	}

	render() {
		let { data, currency, bizMode, listIndex } = this.props || {};
		let titleImgObj = require('../../../../../imgs/global/down.png');
		let { heightObj, imgObj } = this.state;
		let saleInfo, purchaseInfo
		const spin = imgObj.interpolate({
			inputRange: [0, 1],//输入值
			outputRange: ['0deg', '-90deg'] //输出值
		})
		const { priceType, goodsName, goodsCateId, price, uomName, quantity, qualityStdName, priceFormulaDesc, udPrice, orderType, oppoOrderItemInfo, ysPercent, tempPriceFormulaDesc, makePlace } = data;
		if (bizMode === 1) {
			purchaseInfo = (orderType === 'P' ? data : oppoOrderItemInfo);//采购订单基本信息
			saleInfo = (orderType === 'P' ? oppoOrderItemInfo : data);//销售订单基本信息
		}
		let timeStr = this._describe(data);
		return (
			<View style={styles.itemBox}>
				<TouchableOpacity style={styles.getCost} onPress={() => { this._getCostData() }}>
					<Text style={styles.itemTitle}>{goodsName}({goodsCateId})</Text>
					<Animated.Image style={{ transform: [{ rotate: spin }] }} source={titleImgObj} />
				</TouchableOpacity>
				{bizMode === 0 ?
					<View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 13 }}>
						<Text style={{
							fontSize: 11, color: '#000', marginRight: 11
						}}>
							{CURRENCY.getUnit(currency).label + MethodUtil.toThousands(price || 0, 2) + CURRENCY.getUnit(currency).text + '/' + uomName}
						</Text>
						<Text style={[styles.priceType, priceType == 2 ? { color: '#FA6400', backgroundColor: '#FBEFE8' } : { color: '#85C0EC', backgroundColor: '#ECF7FF' }]}>
							{priceType == 2 ? '暂定价' : '一口价'}
						</Text>
						<Text style={{
							fontSize: 11, color: '#000', fontWeight: '600'
						}}>
							{quantity + uomName}
						</Text>
					</View> :
					<View>
						<View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 13 }}>
							<Text style={{
								fontSize: 11, color: '#000', fontWeight: '600', width: 80
							}}>
								{purchaseInfo.quantity + purchaseInfo.uomName}
							</Text>
							<View style={styles.modeType}>
								<Text style={styles.modeTypeText}>采</Text>
							</View>
							<Text style={{
								fontSize: 11, color: '#000', marginRight: 11
							}}>
								{CURRENCY.getUnit(currency).label + MethodUtil.toThousands(purchaseInfo.price || 0, 2) + CURRENCY.getUnit(currency).text + '/' + purchaseInfo.uomName}
							</Text>
							<Text style={[styles.priceType, purchaseInfo.priceType == 2 ? { color: '#FA6400', backgroundColor: '#FBEFE8' } : { color: '#85C0EC', backgroundColor: '#ECF7FF' }]}>
								{purchaseInfo.priceType == 2 ? '暂定价' : '一口价'}
							</Text>
						</View>
						<View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 13 }}>
							<Text style={{
								fontSize: 11, color: '#000', fontWeight: '600', width: 80
							}}>
							</Text>
							<View style={styles.modeTypeSale}>
								<Text style={styles.modeTypeText}>销</Text>
							</View>
							<Text style={{
								fontSize: 11, color: '#000', marginRight: 11
							}}>
								{CURRENCY.getUnit(currency).label + MethodUtil.toThousands(saleInfo.price || 0, 2) + CURRENCY.getUnit(currency).text + '/' + saleInfo.uomName}
							</Text>
							<Text style={[styles.priceType, saleInfo.priceType == 2 ? { color: '#FA6400', backgroundColor: '#FBEFE8' } : { color: '#85C0EC', backgroundColor: '#ECF7FF' }]}>
								{saleInfo.priceType == 2 ? '暂定价' : '一口价'}
							</Text>
						</View>
					</View>
				}

				<Text style={{
					alignItems: 'center', flexDirection: 'row', marginTop: 14, width: '100%', flexWrap: 'wrap'
				}}>
					<Text style={{ fontSize: 11, color: '#000' }}>
						品质：{qualityStdName}
					</Text>
					{priceFormulaDesc ?
						<Text style={{ fontSize: 11, color: '#000' }}>
							| {priceFormulaDesc}
						</Text> : null
					}
					{ysPercent ?
						<Text style={{ fontSize: 11, color: '#000' }}>
							| 溢短装率{ysPercent * 100}%
						</Text> : null
					}
					{tempPriceFormulaDesc ?
						<Text style={{ fontSize: 11, color: '#000' }}>
							| {tempPriceFormulaDesc}
						</Text> : null
					}
					{makePlace ?
						<Text style={{ fontSize: 11, color: '#000' }}>
							| 原产地：{makePlace}
						</Text> : null
					}
					{priceType == 2 && bizMode !== 1 ?
						<Text style={styles.udPrice}>，升贴水:{(udPrice >= 0 ? '+' : '')}{udPrice}元/吨</Text> : null}
					{priceType == 2 && bizMode === 1 ?
						<Text style={styles.udPrice}>，升贴水:{(udPrice >= 0 ? '+' : '')}{udPrice}元/吨(采)、{(oppoOrderItemInfo.udPrice >= 0 ? '+' : '')}{oppoOrderItemInfo.udPrice}元/吨(销)</Text> : null}
				</Text>
				{timeStr ? <Text style={{ fontSize: 11, color: '#000' }}>| {timeStr}</Text> : null}
				<Animated.View style={{ height: heightObj, overflow: 'hidden' }}>
					<View onLayout={(event) => this._onLayout(event)} style={styles.body}>
						{this.itemDetail()}
					</View>
				</Animated.View>
			</View >
		)
	}
}
const styles = StyleSheet.create({
	itemBox: {
		backgroundColor: '#fff',
		marginHorizontal: 10,
		borderRadius: 6,
		paddingBottom: 15,
		paddingLeft: 14,
		paddingRight: 20,
		overflow: 'hidden',
		marginBottom: 12
	},
	getCost: {
		paddingTop: 22,
		justifyContent: 'space-between',
		flexDirection: 'row',
		alignItems: 'center'
	},
	flexRow: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	costTitle: {
		fontSize: 12,
		color: '#040404',
		fontWeight: 'bold'
	},
	itemTitle: {
		fontSize: 14,
		color: '#040404',
		fontWeight: '500',
		width: '95%'
	},
	body: {
		paddingTop: 10 * scale,
	},
	priceType: {
		fontSize: 10,
		paddingVertical: 2,
		paddingHorizontal: 5,
		backgroundColor: '#FBEFE8',
		marginRight: 55
	},
	udPrice: {
		fontSize: 11
	},
	costBox: {
		backgroundColor: '#F4F7FE',
		borderRadius: 6,
		paddingTop: 8,
		paddingBottom: 17,
		// height: 500
	},
	toastTitle: {
		fontSize: 12
	},
	toastText: {
		fontSize: 12,
		fontWeight: 'bold',
		marginLeft: 12
	},
	toastBox: {
		marginBottom: 20
	},
	costTableHorizontal: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 14,
		paddingLeft: 15,
	},
	costTableLeft: {
		width: 156 * scale,
		flexDirection: 'row',
		alignItems: 'center',
	},
	costTableRight: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		marginRight: 16
	},
	costTableRightMin: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		marginRight: 5
	},
	costTable: {
	},
	costTableTitle: {
		opacity: 0.8,
		fontSize: 11,
		color: '#000000'
	},
	costTableRed: {
		fontSize: 10,
		color: '#FB0404',
		fontWeight: 'bold',
		marginLeft: 5,
		marginRight: 5
	},
	costTableLine: {
		borderBottomWidth: 1 / PixelRatio.get(),
		backgroundColor: '#E3E7F0',
		borderStyle: 'solid',
		opacity: 0.3,
		marginTop: 5,
	},
	costTableType: {
		backgroundColor: '#FBEFE8',
		borderRadius: 2,
		paddingHorizontal: 6,
		paddingVertical: 3,
		marginLeft: 5
	},
	costTableTypeText: {
		fontSize: 10,
		color: '#FA6400',
	},
	costTableBottom: {
		marginTop: 9,
		flexDirection: 'row',
		justifyContent: 'flex-end',
		paddingRight: 20
	},
	costTableBottomText: {
		fontSize: 11
	},
	costTableBottomTextRed: {
		fontSize: 11,
		color: '#FB0404',
	},
	modeType: {
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		marginRight: 10,
		backgroundColor: '#F7B500'
	},
	modeTypeSale: {
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		marginRight: 10,
		backgroundColor: '#3E7406'
	},
	modeTypeText: {
		fontSize: 11,
		color: '#FFFFFF'
	},
	costTableRightTitle: {
		opacity: 0.8,
		fontSize: 12,
		color: '#000'
	},
	priceFlag: {
		width: 6,
		height: 10,
		marginRight: 3
	},
	tableUpText: {
		fontSize: 10,
		color: '#E02020'
	},
	tableDownText: {
		fontSize: 10,
		color: '#56C910'
	},
	costTableText: {
		fontSize: 12
	},
	bockBox: {
		paddingTop: 10,
		paddingHorizontal: 20,
	},
	costMarketHorizontal: {
		marginTop: 14,
		paddingLeft: 15,
	},
	marketHorizontal: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 11,
	},
	costTableTitleMin: {
		fontSize: 10,
		color: '#000000',
		marginRight: 10
	}
})